<template>
	<view v-if="deviceCore">
		<cu-custom v-if="component=='deviceInfo'" :isBack="true">
		</cu-custom>
		<cu-custom v-else :isBack="true">
			<block slot="backText">
				{{device.deviceName}}
			</block>
		</cu-custom>
		<view :style="[{paddingBottom:`calc(${tabbarHeight}px)`}]">
			<view v-if="isView()">
				<web-view :src="makeViewUrl()"></web-view>
			</view>
			<deviceInfo v-else-if="component=='deviceInfo'" ref="deviceInfo" :deviceCore="deviceCore" :keyName="keyName"
				:value="value" :port="port"></deviceInfo>
			<view v-else class="margin-sm">
				<deviceSensor v-if="component=='deviceSensor'" ref="deviceSensor" :deviceCore="deviceCore"
					:deviceName="device.deviceName"></deviceSensor>
				<deviceSetting v-if="component=='deviceSetting'" ref="deviceSetting" :deviceCore="deviceCore"
					:deviceName="device.deviceName"></deviceSetting>
				<deviceParam v-if="component=='deviceParam'" ref="deviceParam" :deviceCore="deviceCore"
					:deviceName="device.deviceName"></deviceParam>
				<deviceLinkage v-if="component=='deviceLinkage'" ref="deviceLinkage" :deviceCore="deviceCore"
					:deviceName="device.deviceName"></deviceLinkage>
			</view>
		</view>
		<tabbar :tabbarList='tabbarList' :component='component' v-on:navChange="navChange" style="z-index: 10000;">
		</tabbar>
	</view>
</template>

<script>
	import {
		showToast
	} from '@/util/toast.js'
	import {
		checkLogin,
		parseUrl
	} from '@/util/utils.js'
	import * as storage from '@/util/storage.js'
	import Tabbar from '@/components/ztn-custom/Tabbar/index.vue'
	import PaintRoom from '@/views/PaintRoom/index.vue'
	import DeviceInfo from './components/DeviceInfo/index.vue'
	import DeviceParam from './components/DeviceParam/index.vue'
	import DeviceLinkage from './components/DeviceLinkage/index.vue'
	import DeviceSensor from './components/DeviceSensor/index.vue'
	import DeviceSetting from './components/DeviceSetting/index.vue'
	import * as iotDeviceApi from '@/api/iot/iotDeviceApi.js'
	import {
		nextTick
	} from 'vue'
	export default {
		data() {
			return {
				component: 'deviceInfo',
				tabbarList: [],
				deviceCore: '',
				function: '',
				keyName: '',
				value: '',
				port: '',
				enableServerLinkage: false,
				device: {},
				tabbarHeight: storage.getTabbarHeight(),
				userId: storage.getUserId(),
				language: storage.getLanguage(),
				token: storage.getToken(),
				showView: storage.getShowView(),
			}
		},
		computed: {
			themeConfig() {
				return this.$store.state.themeConfig
			}
		},
		onLoad(option) {
			this.init(option)
		},
		onShow() {
			this.checkLogin()
			this.enableServerLinkage = storage.getEnableServerLinkage()
			const component = this.component
			this.component = ''
			nextTick(() => {
				this.component = component
			})
		},
		methods: {
			isView() {
				if (this.device.viewSign && this.showView) {
					const param = parseUrl(this.device.viewSign)
					if (param['m'] === '1') {
						return true
					}
				}
			},
			makeViewUrl() {
				if (!this.device || !this.device.deviceCore) {
					return null
				}
				let url = this.device.viewSign
				if (url.indexOf('?') >= 0) {
					url = url + '&'
				} else {
					url = url + '?'
				}
				return url + '&deviceCore=' + this.device.deviceCore + '&token=' + this.token + '&type=m'
			},
			checkLogin() {
				checkLogin()
			},
			getDeviceDetails() {
				iotDeviceApi.getDeviceDetails({
					deviceCore: this.deviceCore
				}).then(res => {
					const {
						data
					} = res
					if (data) {
						this.device = data
						// this.device.viewSign = 'http://localhost:3001/site-iot2/?viewSign=solar&m=1'
					}
					this.initTabbar()
				})
			},
			initTabbar() {
				const tabbarList = [{
						component: 'deviceInfo',
						name: 'info',
						icon: 'cuIcon-newsfill'
					},
					{
						component: 'deviceSensor',
						name: 'sensor',
						icon: 'cuIcon-rankfill'
					},
					{
						component: 'deviceSetting',
						name: 'setting',
						icon: 'cuIcon-settingsfill'
					},
					{
						component: 'deviceParam',
						name: 'param',
						icon: 'cuIcon-btn'
					},
				]
				if (this.device.canDeviceLinkage || this.enableServerLinkage) {
					tabbarList.push({
						component: 'deviceLinkage',
						name: 'linkage',
						icon: 'cuIcon-fork'
					})
				}
				this.tabbarList = tabbarList
			},
			init(option) {
				const q = decodeURIComponent(option.q)
				if (option.deviceCore) {
					const {
						component,
						deviceCore,
						keyName,
						value,
						port
					} = option
					this.component = component || 'deviceInfo'
					this.deviceCore = deviceCore
					this.keyName = keyName
					this.value = value
					this.port = port
				} else if (typeof(q) != 'undefined') {
					this.component = this.getQueryString(q, 'deviceNavigationComponent') || 'deviceInfo'
					this.deviceCore = this.getQueryString(q, 'deviceCore')
					this.keyName = this.getQueryString(q, 'keyName')
					this.value = this.getQueryString(q, 'value')
					this.port = this.getQueryString(q, 'port')
				} else {
					showToast(this.$t('error'), 'none', 1000, false) //入口出错
				}
				this.getDeviceDetails()
			},
			getQueryString(url, name) {
				const reg = new RegExp('(^|&|/?)' + name + '=([^&|/?]*)(&|/?|$)', 'i')
				const r = url.substr(1).match(reg)
				if (r != null) {
					return r[2]
				}
				return null;
			},
			navChange(component) {
				if (this.component !== component) {
					this.component = component
				} else {
					showToast(this.$t('refresh'), 'none', 1000, false)
					if (this.$refs[`${component}`] && this.$refs[`${component}`].init) {
						this.$refs[`${component}`].init()
					}
				}
			},
		},
		components: {
			DeviceInfo,
			PaintRoom,
			DeviceLinkage,
			DeviceParam,
			DeviceSensor,
			DeviceSetting,
			Tabbar,
		},
		onShareAppMessage(res) {
			const nickName = storage.getNickName()
			const shortCompanyName = storage.getShortCompanyName()
			return {
				title: this.device.deviceName ? `${nickName}${this.$t('share')}${this.device.deviceName}` :
					`${nickName}${this.$t('share')}${shortCompanyName}`,
				path: `/pages/deviceNavigation/deviceNavigation?deviceName=${this.device.deviceName}&deviceCore=${this.deviceCore}&component=${this.component}`,
			}
		}
	}
</script>
